<template>
    <div>
      <Table :columns="mycolumns"
             :data="mydata"
             height="300"
             highlight-row
             @on-current-change="onClick"
             ref="currentRowTable"
             :loading="loading"
      ></Table>
      <Button class="btn" @click="handleClearCurrentRow">清除单选</Button>
      <i-switch v-model="loading"></i-switch>
    </div>
</template>

<script>
    import {getMyTableData} from '@/api/data.js'
    import Axios from 'axios'
    import path from '@/libs/path.js'
    export default {
        name: "mytable",
        data(){
          return{
            mycolumns:[
              {
                // type:'index', //可以自动的显示从1开始的索引列。使用indexMethod可以自定义序列号
                // 这个东西会覆盖到当前列
                title:'名称',
                key:'name',
                sortable:true,
                render:(h,params) =>{
                  return h('div',[
                    h('strong',params.row.name)
                  ])
                }
              },
              {
                title:'详情',
                key:'details',
                sortable:true
              },
              {
                title:'发生日期',
                key:'occurDate',
                filters:[
                  {
                    label:'2018',
                    value:2018
                  },
                  {
                    label:'2017',
                    value:2017
                  }
                ],
                filterMethod(value,row){
                  console.log(value)
                  if(value ==2018){
                    return row.occurDate.startsWith('2018')
                  }else if(value == 2017){
                    return row.occurDate.startsWith('2017')
                  }else {
                    console.log('bug!!')
                  }
                }
              },
              {
                title:'状态',
                key:'status'
              },
              {
                title:'操作',
                render:(h,params) => {
                  return h('Button',{
                    props: {
                      type:'primary',
                      size:'small',
                    },
                    on: {
                      click: (event) =>{
                        event.stopPropagation()  //阻止事件冒泡
                        this.show(params.row)
                      }
                    }
                  },'预览')
                }
              }
            ],
            mydata:[],
            loading:false
          }
        },
        methods:{
          onClick: function (currentRow,oldCurrentRow) {
            console.log(`currentRow:${currentRow};oldCurrentRow:${oldCurrentRow}`)
            console.log(currentRow)
          },
          handleClearCurrentRow () {
            this.$refs.currentRowTable.clearCurrentRow();
          },
          show(params){
            this.$Modal.info({
              title:'Info',
              content:`Name:${params.name}<br> Age:${params.occurDate}`
            })
          },
          getMyTableData(){
            // 暂时不使用封装的axios, 原因axios还不清楚
            // let $this = this
            // getMyTableData().then(function (res) {
            //   // console.log(res.data)
            //   // console.log(res)
            //   $this.mydata = res.data
            // })
            let $this = this
            Axios.get(path.getMyTableData).then(res => {
              $this.mydata = res.data.data
              console.log(res)
            })
          }
        },
      computed:{

      },
      mounted (){
          this.getMyTableData()
      }
    }
</script>

<style scoped>
  .btn{
    margin: 15px;
  }
</style>
